import React, { useRef } from 'react'

export default function RefCom() {
  //1. 创建 ref 容器   use 使用
  let input = useRef();
  let div = useRef();
  
  //声明 show 函数
  let show = () => {
    // 3. 通过容器获得真实 DOM 对象
    let v = input.current.value;
    //设置 div 的文本
    div.current.innerHTML = v;
  };

  //声明 handleKeyUp 函数
  let handleKeyUp = (e) => {
    //如果按下的是回车键
    if(e.keyCode === 13){
      //调用 show 函数
      show();
    }
  }

  return (
    <div>
      {/* 2. 为元素这是 ref 属性 */}
      <input type="text" ref={input} onKeyUp={handleKeyUp} /><button onClick={show}>显示</button>
      <hr />
      <div ref={div} style={{width: 400, height: 300, border: 'solid 1px #345'}}></div>
    </div>
  )
}
